<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8" isELIgnored="false"%>
    
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/master/limitless/default/demo/contentHeader.jsp"%>
    
<%
    String contextPath = request.getContextPath();
    String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + contextPath;
    String save_introPath="/admin/rel/relative/save_intro";
    String controllerPath=path+"/admin/rel/relative/";
%>
<!DOCTYPE html>  

<html>
<head>
<!-- 1.此处匹配资料：姓名 -->
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]>
    <script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="<%=path%>/assets/css/main.css" />
<!--[if lte IE 9]>
    <link rel="stylesheet" href="assets/css/ie9.css"/><![endif]-->
<!--[if lte IE 8]>
    <link rel="stylesheet" href="assets/css/ie8.css"/><![endif]-->
</head>
<body>


    <div id="wrapper">
        
        <header id="header" class="alt">
        
            <span class="logo"> 
            <a href="${t_virtualpath}/admin/history/upload?name=${relative.relativeId}" >
                <img src="${relative.relative_file}images/photo.jpg" height="200"/>
            </a>
            </span>
            <h1>${relative.getName()}</h1> 
            <h3>${relative.getBirthdayOfString()} - ${relative.getDeathdayOfString()}</p>
        </header>

        
        <nav id="nav">
            <ul>
                <li><a href="#header" class="active">首页</a></li>
                <li><a href="#intro">简介</a></li>
                <li><a href="#event">事迹</a></li>
                <li><a href="#file">文件</a></li>
                <li><a href="#comment">留言</a></li>
            </ul>
        </nav>


    <!-- Header 显示遗像+生卒年-->
    <header id="header" class="alt">
        <span class="logo">
            <!-- img src="${rel.relative_file}/image/photo.jpg" alt=""/ -->
			<img src="${rel.relative_file}images/photo.jpg" alt=""/>
		</span>
        <h1>${rel.getName()}</h1>
        <h2>${rel.getBirthdayOfString()} - ${rel.getDeathdayOfString()}</h2>
    </header>

    <!--主要内容-->
 
        <div id="main">
            <section id="intro" class="main"> 
                <section id="intro-left">
                    <header class="major">
                        <h2>简介</h2>
                        <div class="div-show-hover">
                            <button class="button special small " onclick="intro_edit();">编辑</button>       
                        </div>
                    </header>
                    <dl class="alt">
                    	<p>姓名：${relative.getName()}</p>
                    	<p>性别：${relative.relative_sex}</p>
                    	<p>职业：${relative.relative_job}</p>
                    	<p>民族：${relative.relative_nation}</p>
                    	<p>籍贯：${relative.getBirthPlace()}</p>
                    	<p>生日：${relative.getName()}</p>
                    	<p>姓名：${relative.getBirthdayOfString()}</p>
                    	 <div id="intro_info_isalive">
                    	    <p>姓名：${relative.getDeathdayOfString()}</p>
                    	    <p>姓名：${relative.relative_buryAddress}</p>
                        </div> 
                    </dl>
                </section>

                <div id="intro-edit" style="display: none;" >
                    <t:form id="form_intro_edit" commandName="relative" action="<%=save_introPath%>" method="post" >
                        <div class="hide">
                            <t:hidden path="relativeId"/>
                        </div>
                        <div>
                            <t:textarea rows="5" cols="5" path="relative_information" colClass="col-md-30"/>                           
                            <div class="row uniform">
                                <div class="6u 12u$(medium)">       
                                    <dl class="alt" >
                                        <dt>姓:</dt>
                                        <dd><t:input type="text" path="relative_lastName"/></dd>
                                        <dt>名:</dt>
                                        <dd><t:input type="text" path="relative_firstName"/></dd>
                                        <dt>职业：</dt>
                                        <dd><t:input type="text" path="relative_job" /></dd>
                                        <dt>民族：</dt>
                                        <dd><t:input type="text" path="relative_nation" /></dd>
                                        <dt>籍贯：</dt>
                                        <dd><t:input type="text" path="relative_province" /></dd>
                                    </dl>
                                </div>
                                <div class="6u$ 12u$(medium)">       
                                    <dl class="alt"> 
                                        <dt>性别：</dt>
                                        <dd>
                                            <t:radiobutton path="relative_sex" value="男" >男</t:radiobutton>   
                                            <t:radiobutton path="relative_sex" value="女" >女</t:radiobutton>     
                                        </dd>                                                  
                                        <dt>状态：</dt>
                                        <dd>
                                            <t:radiobutton path="relative_alive" value="0" onclick="deadinfo.style.display='block'">去世</t:radiobutton>  
                                            <t:radiobutton path="relative_alive" value="1" onclick="deadinfo.style.display='none';">健在</t:radiobutton>     
                                        </dd>
                                        <dt>生日：</dt>
                                        <dd><t:date path="relative_birthday"/></dd>
                                        <div id="deadinfo" style="display: none;">
                                            <dt>逝日：</dt>
                                            <dd><t:date path="relative_deathday"/></dd>
                                            <dt>葬地：</dt>
                                            <dd><t:input type="text" path="relative_buryAddress"/></dd>
                                        </div>
                                    </dl>
                                </div>
                            </div>                     
                        </div>
                        <div style="padding-top: 10px;">
                            <input type="submit" class="button special small"  value="保存">
                            <input type="cancel" class="button small" onclick="intro_cancel();" value="取消">
                        </div>
                    </t:form>
                </div>
            </section>

            
            <section id="event" class="main">
                <div class="spotlight">
                    <div class="content">
                        <header class="major">
                            <h2>生平事迹</h2>
                            <div class="div-show-hover">
                                <button class="button special small " onclick="edit_event()">编辑</button>       
                            </div>
                        </header>

                        <div id="div_event_main">
                            <section id="cd-timeline" class="cd-container">
                                <c:forEach var="event" items="${events}" varStatus="status">
                                    <div class="cd-timeline-block">
                                        <div class="cd-timeline-img first">
                                            <img src="<%=path%>/images/circle.svg" alt="${status.index}">
                                        </div>
                                        <div class="cd-timeline-content">
                                            <h2>${event.getDateOfString()}</h2>
                                            <p>${event.eventInfo}</p>
                                        </div>
                                    </div>
                                </c:forEach>   
                            </section>
                        </div>

                        <div id="div_event_edit" style="display: none;">
                            <form method="post" action="<%=controllerPath%>save_event" id="form_event_edit">
                                <input type="hidden" name="relative_id" value="${relative.relativeId}">
                                    <table class="cntable table table-bordered dataTable table-employee ">
                                        <thead>
                                            <tr>
                                                <th style="width:150px">时间</th>
                                                <th style="width:400px">事件</th>
                                            </tr>
                                        </thead>
                                        <tbody id="eventlist">
                                            <c:forEach var="event" items="${events}" varStatus="status">
                                                <tr data-id="${event.eventId}">
                                                    <td><input type="date" name="event_date" value="${event.getDateOfString()}" /></td>
                                                    <td><input type="text" name="event_info" value="${event.eventInfo}" >
                                                    <input type="hidden" name="event_id" value="${event.eventId}"></td>
                                                                                       
                                                </tr>
                                            </c:forEach>
                                        </tbody>
                                    </table>
                                    
                                    
                                <div style="padding-top: 10px;">
                                        <input type="button" class="button special small" onclick="event_submit();" value="保存">
                                        <input type="cancel" class="button small" onclick="event_cancel();" value="取消">
                                </div>
                            </form>
                            <div style="padding-top: 10px;">
                                    <button id="btn_add" onclick="add_event()">添加</button>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </section>

            <div id="file">
                <section class="main">
                    <header class="major">
                        <h2 >影像</h2>
                    </header>

                        

                    <div class="panel-body">
                        <div class="tabbable">
                            <ul class="nav nav-tabs nav-tabs-top nav-justified">
                                <li class="active"><a href="#tab-image" data-toggle="tab">图片</a></li>
                                <li><a href="#tab-audio" data-toggle="tab">音频</a></li>
                                <li><a href="#tab-video" data-toggle="tab">视频</a></li>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane active" id="tab-image">
                                    <div class="row">
                                        <c:forEach var="image" items="${images}" varStatus="status">
                                            <div class="col-lg-3 col-md-3 col-sm-6">
                                                <div class="thumbnail">
                                                    <div class="thumbnail no-padding">
                                                        <img src="<c:url value='${image.get(status.index)}'/>" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </c:forEach>
                                    </div>                                   
                                </div>

                                <div class="tab-pane" id="tab-audio">
                                        
                                    <div class="row">
                                        <c:forEach var="audio" items="${audios}" varStatus="status">
                                            <div class="col-lg-3 col-md-3 col-sm-6">
                                                <div class="thumbnail">
                                                    <div class="video-container">
                                                        <a href="${audio}"><img src="${image.get(status.index)}"></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </c:forEach>
                                    </div>                                   
                                   
                                </div>

                                <div class="tab-pane" id="tab-video">
                                    <div class="row">
                                        <c:forEach var="video" items="${videos}" varStatus="status">
                                            <div class="col-lg-3 col-md-3 col-sm-6">
                                                <div class="thumbnail">
                                                    <div class="video-container">
                                                        <a href="${video}"><img src="${image.get(status.index)}"></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </c:forEach>
                                    </div>   
                                </div>                             
                            </div>
                        </div>
                    </div>
                    <center>
                        <a href="${t_virtualpath}/admin/upload/uploadFile?name=${relative.relativeId}" class="button">上传照片</a></center>   
                </section>
            </div>

            <section id="comment" class="main">
                <div class="spotlight">
                    <div class="content">
                        <header class="major">
                            <h2>评价</h2>
                        </header>
                        <p>小龙女几乎不食人间烟火，但是她和香香公主截然不同。在未曾遇见杨过之前，她已经不动心，决不是“天真纯情”，她另有自己在古墓生活的一套观念。小龙女的这种形象，是接近神仙境界，而不是接近白痴。这其间的分别，十分微妙，所差也不过一线而已</p>
                    </div>
                    
                </div>
            </section>


        </div>

            <!-- 评价 -->
            
        </div>

        <!-- Footer -->
        <footer id="footer"> 
            <section>
                <h2>云忆-让记忆永存</h2>
                    <dl class="alt">
                        <dt>微信：</dt>
                        <dd>我是微信服务号</dd>
                        <dt>电话：</dt>
                        <dd>我是电话</dd>
                        <dt>邮箱：</dt>
                        <dd>我是邮箱</dd>
                        <dt>官网：</dt>
                        <dd>我是网址</dd>
                    </dl>
            </section>

            <p class="copyright">
                青史留名. <a href="#">云忆</a>.
            </p>
        </footer>

    </div>







    <!-- Scripts -->
    <script src="${t_virtualpath}/assets/js/jquery.min.js"></script>
    <script src="${t_virtualpath}/assets/js/jquery.scrollex.min.js"></script>
    <script src="${t_virtualpath}/assets/js/jquery.scrolly.min.js"></script>
    <script src="${t_virtualpath}/assets/js/skel.min.js"></script>
    <script src="${t_virtualpath}/assets/js/util.js"></script>
    <!--[if lte IE 8]>
    <script src="assets/js/ie/respond.min.js"></script><![endif]-->
    <script src="${t_virtualpath}/assets/js/main.js"></script>

</body>
</html>

<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formstyling.jsp"%>
<script type="text/javascript">
    var div1=document.getElementById("intro_info_isalive");
    var div0=document.getElementById("deadinfo");
    
    if(${relative.relative_alive}=="1"){
        div1.style.display="none";
        div0.style.display="none";
    }else{
        div1.style.display="block";
        div0.style.display="block";
    }
    
</script>
<script type="text/javascript">

    var div2=document.getElementById("intro-left");
    var div3=document.getElementById("intro-edit");

    function intro_edit(){
        div2.style.display="none";
        div3.style.display="block";
    }

    function intro_save(){
        div2.style.display="block";
        div3.style.display="none";
        //var form_1=document.getElementById("form_intro_edit");
        //form_1.submit();
        $("#form_intro_edit").submit();   
    }

    function intro_cancel(){
        div2.style.display="block";
        div3.style.display="none";  
        $("#form_intro_edit").cancel();           
    }
</script>

<script type="text/javascript">

    function add_event(){
        var row = $('<tr><td><input type="date" name="event_date"></td>'
                   +'<td><input type="text" name="event_info">'
                   +'<input type="hidden" name="event_id" value=""></td>'
                   +'</tr>'); //create row
        $('#eventlist').append(row);
    }


    function edit_event(){
        var div4=document.getElementById("div_event_main");
        var div5=document.getElementById("div_event_edit");
        div4.style.display="none";
        div5.style.display="block";
    }

    function event_submit(){
        var div4=document.getElementById("div_event_main");
        var div5=document.getElementById("div_event_edit");
        div4.style.display="block";
        div5.style.display="none";

        $("#form_event_edit").submit(); 
    }

    function event_cancel(){
        var div4=document.getElementById("div_event_main");
        var div5=document.getElementById("div_event_edit");
        div4.style.display="block";
        div5.style.display="none";
        $("#form_event_edit").cancel();  
    }


</script>


<%@ include file="/WEB-INF/views/shared/base/master/limitless/default/demo/contentFooter.jsp"%>

